<template>
	<view class="box">
		<view class="vip_good">
			<view class="good_title">
				<view class="line2">购买商品送会员(vip)</view>
			</view>
			<view :class="['good_item',{actives: ActiveNum === index}]"
				@tap="Active(index,item.productId,item.promotionPrice, item.quantity)"
				v-for="(item,index) in ProductArray" :key="index">
				<view class="good_item_img">
					<img :src="item.productImg" mode=""></img>
				</view>
				<view class="good_item_T">
					<view class="good_item_title">{{ item.title }}</view>
					<view class="good_item_price"> <text>￥</text>{{ item.promotionPrice }}<text class="aa">
							原价{{ item.price }}元</text></view>
					<view class="good_item_tag">{{ item.quantity>12? "永久会员":item.quantity+'个月VIP' }}</view>
				</view>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="address" @click="goAddress">
			<view>收货地址：</view>
			<view class="address_X">
				<view v-if="shippingAddress.address">{{ shippingAddress.address }}</view>
				<view v-if="shippingAddress.name">{{ shippingAddress.name }} {{ shippingAddress.phone }}</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 备注 -->
		<view class="remarks">
			<view class="remarks_tips">
				备注
			</view>
			<view class="tips_warring">
				1、所有商品由官方定制提供,不包邮(联系客服 缴纳邮费后发货)。
			</view>
			<view class="tips_warring">
				2、购买商品后会员会立即到账，若10分钟后还未到账，请在个人 中心页面点击"刷新会员"，或者联系微信客服或者关注【培音】公 众号，联系客服。
			</view>
			<view class="tips_warring" style="color: red;">
				3、温馨提示:'虚拟物品不支持退款，请试用满意后付款'
			</view>
		</view>
		<!-- 立即购买 -->
		<view class="" style="height: 100rpx;">
			<view class="footer_box">
				<view class="price_box">
					<view>{{ProductArray[ActiveNum].promotionPrice}}{{'/元'}}</view>
				</view>
				<view class="buy_box" @click="submit">
					<view>立即购买</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import cryptoJs from '../../utils/encryptDES.js';
	import {
		apiMixUrlApi,
		apiMixUrlKeyApi
	} from '@/api/assemb.js';
	import {
		isLogin,
		vipType
	} from '@/business/login.js';
	import store from '../../store/idnex.js';

	function compare(property) {
		return function(a, b) {
			console.log(a, b);
			var value1 = a[property];
			var value2 = b[property];
			return value1 - value2; //倒序   value1-value2  正序
		};
	}
	var app = getApp();
	export default {
		data() {
			return {
				isVip: false,
				isLogin: false, //是否登录
				ProductArray: [
					{
					price: 60.00,
					productId: "wxzy.month",
					productImg: "/static/memberCenter/pen.png",
					productType: 2,
					promotionPrice:40.00,
					quantity: 1,
					title: "1个月vip+定制铅笔"
				}, {
					price: 128.00,
					productId: "wxzy.quarter",
					productImg: "/static/memberCenter/pen2.png",
					productType: 2,
					promotionPrice:99.00,
					quantity: 3,
					title: "3个月vip+2支定制铅笔"
				}, {
					price: 308.00,
					productId: "wxzy.year",
					productImg: "/static/memberCenter/pen3.png",
					productType: 2,
					promotionPrice: 168.00,
					quantity: 12,
					title: "12个月vip+定制圆珠笔"
				}],
				ActiveNum: 0,
				productid: 'wwyczs.month',
				quantity: 1,
				promotionPrice: "29.00",
				shippingAddress: {
					name: '',
					phone: '',
					address: ''
				}
			};
		},
		onShow() {
			if (uni.getStorageSync("shippingAddress")) {
				this.shippingAddress = uni.getStorageSync("shippingAddress")
			}
		},
		onLoad() {
			this.isLogin = isLogin();
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
			this.requestProductInfo();
		},
		methods: {
			submit() {
				const _this = this
				if (_this.shippingAddress.name) {
					_this.formSubmit()
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '您还没有填写收货地址,是否填写收货地址',
						cancelText: '填写地址',
						confirmText: '稍后填写',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.formSubmit()
							} else if (res.cancel) {
								console.log('用户点击取消');
								_this.goAddress()
							}
						}
					})
				}
			},
			formSubmit() {
				let addressInfo;
				if (this.shippingAddress.name) {
					addressInfo =
						"姓名" +
						this.shippingAddress.name +
						"地址：" +
						this.shippingAddress.address +
						"手机号码" +
						this.shippingAddress.phone
				} else {
					addressInfo = null;
				}
				if (this.isLogin) {
					var app = getApp();
					var that = this;
					let param = {
						productName: this.productid,
						fee: this.ProductArray[this.ActiveNum].promotionPrice,
						// fee: 0.01,
						body: 'VIP充值' + this.quantity + '个月',
						openid: uni.getStorageSync('baseinfo').openid,
						type: 2,
						neednotifyadd: 1,
						addressInfo: addressInfo,
					};
					apiMixUrlApi(param, 1060, 'WxPayApplets').then(result => {
						that.payment(result);
					});
				} else {
					this.show = true;
				}
			},

			payment(n) {
				let _this = this;
				var encrypted = cryptoJs.encryptMD5(
					'appId=' +
					store.state.wxAppId +
					'&nonceStr=' +
					n.noncestr +
					'&package=prepay_id=' +
					n.prepayid +
					'&signType=MD5&timeStamp=' +
					n.timestamp +
					'&key=chenyangchenyangchenyangchenyang'
				);
				console.log(encrypted, 'encrypted');
				wx.requestPayment({
					timeStamp: n.timestamp,
					nonceStr: n.noncestr,
					package: 'prepay_id=' + n.prepayid,
					signType: 'MD5',
					paySign: encrypted,
					complete: function(res) {
						if (res.errMsg == 'requestPayment:ok') {
							vipType(true);
							uni.switchTab({
								url: '/pages/my/my'
							})
						}
					}
				});
			},
			goAddress() {
				const _this = this
				uni.chooseAddress({
					success(res) {
						_this.shippingAddress.name = res.userName
						_this.shippingAddress.phone = res.telNumber
						_this.shippingAddress.address = res.provinceName + res.cityName + res.countyName + res
							.detailInfo
						console.log(_this.shippingAddress);
						uni.setStorageSync('shippingAddress', _this.shippingAddress)
					}
				})
			},
			/* 获取商品信息 */
			requestProductInfo() {
				let _this = this;
				let data = {}
				apiMixUrlApi(data, 1086, 'QueryProductInfoWxIos').then(result => {
					console.log(result, 'result');
					_this.ProductArray = result.product.sort(compare('promotionPrice'));
					_this.Active(0, _this.ProductArray[0].productId, _this.ProductArray[0].promotionPrice, _this
						.ProductArray[0].quantity)
				});
			},
			Active(index, productId, promotionPrice, quantity) {
				this.ActiveNum = index;
				this.productid = productId;
				this.promotionPrice = promotionPrice;
				this.quantity = quantity;
				console.log(productId, 'productId');
			}
		}
	}
</script>

<style lang="scss">
	.footer_box {
		    width: 380rpx;
		    /* height: rpx; */
		    background: #FF553F;
		    border-radius: 45rpx;
		    display: flex;
		    /* margin-top: 80rpx; */
		    /* margin-left: 150rpx; */
		    position: fixed;
		    bottom: 10rpx;
		    right: 30rpx;

		.price_box {
			display: flex;
			justify-content: center;
			width: 240rpx;
			height: 91rpx;
			background: #FFAF25;
			border-radius: 45rpx 0 0 45rpx;

			view {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 91rpx;
			}
		}

		.buy_box {
			display: flex;
			justify-content: center;
			width: 240rpx;
			height: 91rpx;
			background: #FF553F;
			border-radius: 0 45rpx 45rpx 0;

			view {
				font-size: 36rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 91rpx;
			}
		}
	}

	.remarks {
		width: 697rpx;
		background: #FFFFFF;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin: 0 auto;
		margin-top: 25rpx;
		padding: 40rpx 0;

		.remarks_tips {
			margin-left: 28rpx;
			margin-bottom: 20rpx;
		}

		.tips_warring {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 28rpx;
			margin-right: 28rpx;
			line-height: 34rpx;
		}
	}

	.address {
		width: 697rpx;
		height: 129rpx;
		background: #FFFFFF;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.address_X {
			width: 400rpx;

			view {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

	}

	.actives {
		background: #FFF7F7 !important;
	}

	.good_item {
		display: flex;
		justify-content: left;
		align-items: center;
		margin-bottom: 23rpx;

		.good_item_img {
			width: 189rpx;
			height: 181rpx;
			margin-right: 37rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.good_item_T {
			.good_item_tag {
				width: 135rpx;
				height: 36rpx;
				background: #FFECE9;
				border-radius: 6px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FA2121;
			}

			.good_item_title {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.good_item_price {
				font-size: 39rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FE2C11;
			}

			.good_item_price :first-child {
				font-size: 22rpx;
			}

			.good_item_price .aa {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-decoration: line-through;
				color: #999999;
				line-height: 99rpx;
				margin-left: 24rpx;
			}

		}
	}

	.good_title {
		margin-bottom: 40rpx;

		.line2 {
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 19px;
		}
	}

	.vip_good {
		width: 697rpx;
		height: 733rpx;
		background: #FFFFFF;
		margin: auto;
		padding: 29rpx;
		box-sizing: border-box;
		transform: translateY(18rpx);
	}

	.box {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;
	}
</style>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>